<template>
	<view class="feedback-page">
		<!-- 背景装饰 (雪花特效) -->
		<canvas canvas-id="snow-canvas" class="snow-canvas"></canvas>

		<view class="header">❄️ 反馈与帮助</view>

		<view class="section-title">💬 提交反馈</view>
		<view class="feedback-container">
			<textarea v-model="feedbackContent" placeholder="请输入您的反馈内容..." class="feedback-input"></textarea>
			<button class="submit-btn" @click="submitFeedback">提交反馈</button>
		</view>

		<view class="section-title">📝 常见问题</view>
		<view class="faq-list">
			<view class="faq-item" v-for="(item, index) in faqList" :key="index">
				<view class="faq-question" @click="toggleAnswer(index)">
					{{ item.question }}
				</view>
				<view v-if="item.showAnswer" class="faq-answer">
					{{ item.answer }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				feedbackContent: "",
				faqList: [{
						question: "如何修改个人信息？",
						answer: "您可以在设置页中修改个人信息，包括昵称、性别等。",
						showAnswer: false
					},
					{
						question: "如何提交反馈？",
						answer: "在反馈页面填写您的问题或建议，然后点击提交按钮。",
						showAnswer: false
					},
					{
						question: "如何查看我的收藏？",
						answer: "进入我的收藏页，您可以查看您收藏的告白墙内容。",
						showAnswer: false
					}
				]
			};
		},
		onReady() {
			this.initCanvasBg();
		},
		methods: {
			async submitFeedback() {
				if (this.feedbackContent.trim()) {
					const res = await this.$api.post('/Feedback/submit',{content:this.feedbackContent,feedback_type:1},true)
					if(res.data.code === 200) {
						
					}
					uni.showToast({
						title: "反馈提交成功！",
						icon: "success"
					});
					this.feedbackContent = ""; // 清空输入框
				} else {
					uni.showToast({
						title: "请输入反馈内容",
						icon: "none"
					});
				}
			},
			toggleAnswer(index) {
				this.faqList[index].showAnswer = !this.faqList[index].showAnswer;
			},
			initCanvasBg() {
				const sys = uni.getSystemInfoSync();
				const W = sys.windowWidth;
				const H = sys.windowHeight;
				const ctx = uni.createCanvasContext('snow-canvas', this);

				// 雪花特效的模拟
				const snowflakes = Array.from({
					length: 40
				}, () => ({
					x: Math.random() * W,
					y: Math.random() * H,
					size: Math.random() * 5 + 2,
					speed: Math.random() * 1 + 1
				}));

				const draw = () => {
					ctx.clearRect(0, 0, W, H);
					ctx.setFillStyle('rgba(255, 255, 255, 0.8)');
					ctx.beginPath();

					snowflakes.forEach(snowflake => {
						ctx.moveTo(snowflake.x, snowflake.y);
						ctx.arc(snowflake.x, snowflake.y, snowflake.size, 0, 2 * Math.PI);
					});
					ctx.fill();

					snowflakes.forEach(snowflake => {
						snowflake.y += snowflake.speed;
						if (snowflake.y > H) snowflake.y = -snowflake.size;
						snowflake.x += Math.sin(snowflake.y * 0.05) * 0.5; // 让雪花漂移
					});
					
					ctx.draw();
					// #ifdef H5
					requestAnimationFrame(draw);
					// #endif
					// #ifdef MP-WEIXIN
					setTimeout(draw, 1000 / 60);
					// #endif
				};

				draw();
			}
		}
	};
</script>

<style scoped>
	.feedback-page {
		position: relative;
		height: 100vh;
		background: linear-gradient(to right, #c3f0f7, #fff7d6);
		padding: 60rpx 30rpx 100rpx;
	}

	.snow-canvas {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		width: 100vw;
		height: 100vh;
		pointer-events: none;
	}

	.header {
		font-size: 48rpx;
		font-weight: bold;
		color: #4caf50;
		text-align: center;
		margin-bottom: 40rpx;
		z-index: 1;
		position: relative;
	}

	.section-title {
		font-size: 42rpx;
		font-weight: 600;
		color: #333;
		margin-top: 40rpx;
		margin-bottom: 20rpx;
		z-index: 1;
		position: relative;
	}

	.feedback-container {
		background: #fff;
		padding: 40rpx;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
		z-index: 1;
	}

	.feedback-input {
		width: 94%;
		height: 200rpx;
		padding: 20rpx;
		font-size: 30rpx;
		border-radius: 15rpx;
		border: 1px solid #ccc;
		margin-bottom: 30rpx;
		resize: none;
		background: #f9f9f9;
	}

	.submit-btn {
		background: #4caf50;
		color: white;
		font-size: 36rpx;
		padding: 0rpx 0;
		border-radius: 50rpx;
		width: 100%;
		margin-top: 20rpx;
		box-shadow: 0 8rpx 20rpx rgba(76, 175, 80, 0.3);
		z-index: 1;
		position: relative;
		animation: bounceIn 0.5s ease-in-out;
	}

	.faq-list {
		margin-top: 40rpx;
		z-index: 1;
		position: relative;
	}

	.faq-item {
		background: #fff;
		padding: 40rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
		cursor: pointer;
	}

	.faq-question {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
	}

	.faq-answer {
		font-size: 30rpx;
		color: #777;
	}

	@keyframes bounceIn {
		0% {
			transform: scale(0.9);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}
</style>